<template>
  <q-scroll-area style="height: 550px; max-width: 300px">
    <div class="my-toolbox my-text-overflow">
      <AmyMenuTabs/>
  </div>
  </q-scroll-area>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref, watch } from 'vue';
import AmyMenuTabs from 'layouts/AmyMenuTabs.vue';
import ToolBoxItem from 'layouts/ToolBoxItem.vue';
import TreeItem from 'layouts/TreeItem.vue';
import { useRoute, useRouter } from 'vue-router';
import { CProjectNode, EPageType } from 'stores/editorModels';
import { CTreeItemVO } from 'src/hook/common/useCommonTreeType';
import { useCommonStore } from 'stores/commonStore';


export default defineComponent({
  cname: 'HmiToolbox',
  components: {
    AmyMenuTabs,
    TreeItem,
    ToolBoxItem
  },

  setup (props, context) {
    //********************************************************************
    //      路由模块和store
    //********************************************************************
    let curRoute = useRoute();
    let router = useRouter();
    const commonStore = useCommonStore();


    //********************************************************************
    //                  业务处理逻辑
    //********************************************************************
    //响应数据，tab标识
    let tabValue = ref('tab-project');
    let myProject = ref<CProjectNode>({
      id: 0,
      cname: '',
      companyId: 0,
      wsAddr: '',
      wsPort: 0,
      sortCode: '',
      description: ''
    });

    //项目名称
    const findTreeListName = (list: CTreeItemVO[], id: number): string => {
      let index = 0;
      index = list.findIndex((item) => (item.sid === id.toString()));
      if (index !== -1) {
        return list[index].name;
      } else {
        return 'err';
      }
    }

    //路由跳转
    const gotoRoutePage = (id: number, pType: EPageType) => {
      //动态路由
      let route = {
        name: 'Editor',
        path: '/uiv'
      };

      //使用query指定name,path都行
      router.push({
        path: route.path,
        query: {
          projectId: myProject.value.id,
          projectName: myProject.value.cname,
          pageType: pType,
          pageId: id
        }
      });
    }




    //********************************************************************
    //                  初始化
    //********************************************************************
    //初始化
    const init = () => {

    }

    //监视数据变化
    watch(() => commonStore.pageRefresh, () => {

    });

    //挂载数据
    onMounted(() => {
      init();
    });

    return {
      tabValue,

      myProject
    };
  }
});

</script>

<style lang="scss" scoped>
.my-toolbox {
  width: 100%;
  height: 100%;

  .q-tab-panel {
    padding: 2px;
  }
}

</style>
